<template>
  <div class="my-paper">
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon><HomeFilled /></el-icon>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-tag 
        :type="$route.name === 'list' ? 'primary' : ''"
        @click="switchToList"
      >试卷列表</el-tag>
      <el-tag
        v-if="$route.name === 'create'"
        type="primary"
        closable
        @close="confirmClose"
      >
        {{ $route.query.mode === 'edit' ? '编辑试卷' : '创建试卷' }}
      </el-tag>
    </div>
    
    <div class="component-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { HomeFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const router = useRouter()

// 切换到列表页前确认
const switchToList = () => {
  if (router.currentRoute.value.name === 'create') {
    ElMessageBox.confirm(
      '切换页面将丢失未保存的内容，是否继续？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        router.push({ name: 'list' })
      })
      .catch(() => {
        // 用户取消，保持当前页面
      })
  } else {
    router.push({ name: 'list' })
  }
}

// 关闭创建页面前确认
const confirmClose = () => {
  ElMessageBox.confirm(
    '关闭页面将丢失未保存的内容，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      router.push({ name: 'list' })
    })
    .catch(() => {
      // 用户取消，保持当前页面
    })
}
</script>

<style scoped>
@import "../css/mypaper.css";

</style>